<template>
    <view>
        <view class="voicebox">
            <view class="box_l">
                <view></view>
                <text>已绑定设备{{ boxList.length }}台</text>
            </view>
            <view class="box_r" @tap="showModelFun">
                <text>添加设备+</text>
            </view>
        </view>
        <view class="list" v-for="(item, index) in boxList" :key="index">
            <view class="list_img">
                <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/box_img.png" mode="" />
                <text>SN:{{ item.sn }}</text>
            </view>

            <view class="list_r">
                <view class="list_btn" :data-id="item.id" :data-sn="item.sn" @tap="showModelNoFun">
                    <text>解绑</text>
                </view>
                <switch color="#E94A18" :checked="!!item.receiveStatus" :data-id="item.id" @change="switchChange" />
            </view>
        </view>
        <view class="hide_model" @tap="hideModel" v-if="showModel" @touchmove.stop.prevent="trueFun"></view>
        <view class="model_box" v-if="showModel">
            <view class="box_t">
                <view class="input_num">
                    <view></view>
                    <text>输入绑定号</text>
                </view>
                <image @tap="hideModel" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png" mode="" />
            </view>
            <view class="content">
                <text>请查看设备背面的设备编码，或点击下方扫描功能直接扫码设备二维码</text>
            </view>
            <view class="code_box">
                <input class="weui-input" @input="bindinput" :value="sn" auto-focus placeholder="请输入云音响设备编码" />
                <image @tap="openQrcode" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/code_icon.png" mode="" />
            </view>
            <view class="code_btn" @tap="addNewBox">
                <text>绑定</text>
            </view>
        </view>
        <view class="hide_model" @tap="hideModelNo" v-if="showModelNo" @touchmove.stop.prevent="trueFun"></view>
        <view class="model_box" v-if="showModelNo">
            <view class="box_t">
                <view class="input_num">
                    <view></view>
                    <text>解绑收款播报云音响</text>
                </view>
                <image @tap="hideModelNo" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png" mode="" />
            </view>
            <view class="code_box">
                <input class="weui-input" type="number" :password="true" @input="getpassword" auto-focus placeholder="请输入账户密码解绑" />
            </view>
            <!-- <view class="err">
    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/err_icon.png" mode=""/>
    <text>账户密码错误，请重新输入。</text>
  </view> -->
            <view class="code_btn" @tap="onUnDind">
                <text>立即解绑</text>
            </view>
        </view>
    </view>
</template>

<script>
const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            switch1Checked: false,
            showModel: false,
            sn: '',
            boxList: [],
            showModelNo: false,
            value: '',
            kzs: false,
            id: '',
            getSn: ''
        };
    },
    onLoad(options) {
        this.onLoadClone3389(options);
    },
    methods: {
        onLoadClone3389(options) {
            this.getBoxList();
        },

        switchChange(e) {
            _request
                .postObj('/device/updateReceiveStatus', {
                    storeId: uni.getStorageSync('storeId'),
                    receiveStatus: e.detail.value ? 1 : 0,
                    id: e.currentTarget.dataset.id
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '修改成功',
                            icon: 'none',
                            duration: 2000
                        });
                    }

                    this.getBoxList();
                })
                .catch((error) => {});
        },

        hideModel() {
            this.setData({
                showModel: false
            });
        },

        hideModelNo() {
            this.setData({
                showModelNo: false
            });
        },

        showModelNoFun(e) {
            this.setData({
                showModelNo: true,
                id: e.currentTarget.dataset.id,
                getSn: e.currentTarget.dataset.sn
            });
        },

        bindinputremove() {},

        bindinput(e) {
            console.log(e.detail.value);
            this.setData({
                sn: e.detail.value
            });
        },

        addNewBox() {
            if (!this.sn) {
                uni.showToast({
                    title: '请输入编码',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            _request
                .postObj('/device/bindDevice', {
                    storeId: uni.getStorageSync('storeId'),
                    sn: this.sn,
                    receiveStatus: 1,
                    status: 1
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '绑定成功',
                            duration: 2000
                        });
                        setTimeout(() => {
                            this.hideModel();
                            this.getBoxList();
                        }, 2000);
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        getBoxList() {
            _request
                .postObj('/device/page', {
                    storeId: uni.getStorageSync('storeId'),
                    status: 1
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            boxList: res.data.data || []
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        openQrcode() {
            // 只允许从相机扫码
            let that = this;
            uni.scanCode({
                onlyFromCamera: true,

                success(res) {
                    that.setData({
                        sn: res.result
                    });
                }
            });
        },

        showModelFun() {
            this.setData({
                showModel: true
            });
        },

        // 解绑设备
        unbindDevice() {
            const vm = this;

            _request
                .postObj('/device/bindDevice', {
                    storeId: uni.getStorageSync('storeId'),
                    status: 0,
                    id: this.id,
                    sn: this.getSn
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '解绑成功',
                            icon: 'none',
                            duration: 1500
                        });
                        vm.setData(
                            {
                                showModelNo: false,
                                getSn: '',
                                value: ''
                            },
                            () => {
                                setTimeout(() => {
                                    vm.onLoadClone3389({});
                                }, 1000);
                            }
                        );
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: res.data.message,
                            showCancel: false,
                            confirmText: '知道了'
                        });
                    }
                });
        },

        // 按钮解绑
        onUnDind() {
            if (this.kzs) {
                return;
            }

            if (this.value.length == 6) {
                _request
                    .get('/settings/initPayWord', {
                        userId: uni.getStorageSync('userid')
                    })
                    .then((res) => {
                        if (res.data.message == '支付密码还未设置' && res.data.data == 0) {
                            uni.showToast({
                                title: '支付密码还未设置',
                                icon: 'none',
                                duration: 1000
                            });

                            if (this.kzs) {
                                return;
                            }

                            this.setData({
                                kzs: true
                            });
                            setTimeout(() => {
                                this.setData({
                                    showModelNo: false,
                                    value: ''
                                });
                                uni.navigateTo({
                                    url: '/pages/setpaypassword/index'
                                });
                                setTimeout(() => {
                                    this.setData({
                                        kzs: false
                                    });
                                }, 1000);
                            }, 1000);
                        } else if (res.data.message == '支付密码已设置' && res.data.data == 1) {
                            _request
                                .postObj('/settings/checkPayWord', {
                                    payWord: this.value,
                                    userId: uni.getStorageSync('userid')
                                })
                                .then((res) => {
                                    this.setData({
                                        kzs: true
                                    });
                                    this.setData({
                                        value: ''
                                    });

                                    if (res.data.code === 200) {
                                        this.unbindDevice();
                                        setTimeout(() => {
                                            this.setData({
                                                kzs: false
                                            });
                                        }, 1000);
                                    } else {
                                        uni.showToast({
                                            title: res.data.message,
                                            icon: 'none',
                                            duration: 2000
                                        });
                                        setTimeout(() => {
                                            this.setData({
                                                kzs: false
                                            });
                                        }, 1000);
                                    }
                                });
                        }
                    });
            } else {
                uni.showToast({
                    title: '请输入正确支付密码',
                    icon: 'none',
                    duration: 1000
                });
                setTimeout(() => {
                    this.setData({
                        kzs: false
                    });
                }, 1000);
            }
        },

        // 获取密码
        getpassword(e) {
            this.setData({
                value: e.detail.value
            });
        },

        trueFun() {
            console.log('占位：函数 true 未声明');
        }
    }
};
</script>
<style>
page {
    background: #f1f1f1;
}
.voicebox {
    width: 750rpx;
    height: 120rpx;
    display: flex;
    background: #ffffff;
    align-items: center;
    justify-content: space-between;
}
.box_l {
    margin-left: 40rpx;
    display: flex;
    align-items: center;
}
.box_l view {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
}
.box_l text {
    margin-left: 10rpx;
}
.box_r {
    width: 164rpx;
    height: 52rpx;
    background: linear-gradient(-18deg, #fb6a3c, #e94a18);
    border-radius: 27rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40rpx;
}
.box_r text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.list {
    width: 750rpx;
    height: 140rpx;
    background: #ffffff;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list_img {
    margin-left: 40rpx;
    display: flex;
    align-items: center;
}
.list_img image {
    width: 100rpx;
    height: 100rpx;
}
.list_img text {
    margin-left: 20rpx;
    display: block;
    width: 200rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.list_btn {
    width: 121rpx;
    height: 55rpx;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    border-radius: 27rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 50rpx;
}
.list_r {
    display: flex;
}
.list_r switch {
    margin-right: 40rpx;
}
.list_btn text {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}
.hide_model {
    width: 750rpx;
    height: 100vh;
    background: #000000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
}
.model_box {
    width: 750rpx;
    height: 559rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    position: fixed;
    bottom: 0;
}
.box_t {
    width: 670rpx;
    margin: 36rpx auto 10rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.box_t image {
    width: 27rpx;
    height: 26rpx;
}
.input_num {
    display: flex;
    align-items: center;
}
.input_num view {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
}
.input_num text {
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 10rpx;
}
.content {
    margin-left: 40rpx;
}
.content text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}
.code_box {
    width: 670rpx;
    height: 66rpx;
    margin: 100rpx auto 0 auto;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #e5e5e5;
}
.code_box image {
    width: 40rpx;
    height: 40rpx;
}
.code_btn {
    width: 408rpx;
    height: 66rpx;
    background: #e94c19;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(188, 46, 0, 0.2);
    border-radius: 33rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 90rpx auto;
}
.code_btn text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.err {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
}
.err image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 40rpx;
}
.err text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94c19;
    margin-left: 10rpx;
}
</style>
